<template>
  <el-cascader
    v-model="dataValue"
    ref="myCascader"
    :options="options"
    :props="{ checkStrictly: true, label: keyLabel, value: keyValue }"
    :placeholder="placeholder"
    :style="`width: ${width}px;`"
    clearable
    @change="handleChange"
  ></el-cascader>
</template>
<script>
import axios from 'axios'
export default {
  name: 'the-cascader',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    placeholder: '请选择(省、市)',
    value: '',
    keyLabel: {
      type: String,
      default: 'name'
    },
    keyValue: {
      type: String,
      default: 'id'
    },
    width: {
      type: [String, Number],
      default: '200'
    }
  },
  watch: {
    value(val){
      this.dataValue = val
    }
  },
  data() {
    return {
      dataValue: "",
      options: [],
    };
  },
  created() {
    const _this = this
    const url = 'http://service-actq27oi-1253313441.gz.apigw.tencentcs.com/release/area/json'
    // http://service-actq27oi-1253313441.gz.apigw.tencentcs.com/release/area/json
    // http://ht.fangkeng.wang/api/v1/area/json
    axios.get(url).then(pos => {
      const data = pos.data
      if(typeof data === 'string'){
        _this.options = JSON.parse(data)
      }else{
        _this.options = data
      }
    }).catch(err => {
      console.error(err)
    })
  },
  methods: {
    getKey(){
      this.$nextTick(() => {
        if(this.$refs.myCascader && this.$refs.myCascader.getCheckedNodes){
          console.log(this.$refs.myCascader, 'this.$refs.myCascader')
<<<<<<< HEAD
          return this.$refs.myCascader[0].getCheckedNodes()[0].pathLabels
=======
          return this.$refs.myCascader.getCheckedNodes()[0].pathLabels
>>>>>>> 232a38acf9872733b5a0d3efe83312cfaecaa079
        }
      })
    },
    handleChange(arr) {
      this.$emit('change', arr)
    }
  }
};
</script>
<style lang="scss" scoped></style>
